<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>装箱单</title>
    <link
      type="text/css"
      rel="stylesheet"
      href="./bootstrap-3.3.6-dist/css/bootstrap.css"
    />
    <link
      type="text/css"
      rel="stylesheet"
      href="./bootstrap-3.3.6-dist/css/bootstrap-theme.css"
    />
    <style type="text/css">
      td {
        padding: 3px 3px 3px 3px;
      }
      #page {
        padding: 5px 5px 5px 5px;
        /* background-color:green;*/
      }
      .contact_delete {
        margin: 1px 20px 1px 1px;
      }
      /*.contact_usepack{margin:1px 20px 1px 1px;}*/
      .contact_zxd {
        margin: 1px 20px 1px 1px;
      }
      .contact_zs {
        margin: 1px 20px 1px 1px;
      }
      thead tr {
        font-weight: bold;
      }
      .table_input {
        background-color: green;
      }
      .ui-widget-overlay {
        opacity: 0.5 !important; /* Make sure to change both of these, as IE only sees the second one */
        filter: Alpha(Opacity=50) !important;

        background-color: rgb(
          50,
          50,
          50
        ) !important; /* This will make it darker */
      }
    </style>
    <!-- <link href="./starter-template.css" rel="stylesheet"> -->
    <script>
      if (typeof module === 'object') {
        window.module = module;
        module = undefined;
      }
    </script>
    <script
      type="text/javascript"
      src="./jquery-ui-1.11.4.custom/external/jquery/jquery.js"
    ></script>
    <script
      type="text/javascript"
      src="./bootstrap-3.3.6-dist/js/bootstrap.js"
    ></script>
    <link
      type="text/css"
      rel="stylesheet"
      href="./jquery-ui-1.11.4.custom/jquery-ui.css"
    />
    <script
      type="text/javascript"
      src="./jquery-ui-1.11.4.custom/jquery-ui.js"
    ></script>
    <script src="./backbone_parts/json2.js"></script>
    <script src="./backbone_parts/underscore.js"></script>
    <script src="./backbone_parts/backbone.js"></script>
    <script>
      $(function() {
        var availableTags = [
          'CS-1011C',
          'CS-2800',
          'CS-3000',
          'CS-3000G',
          'HD-5',
          'N-3000',
          'O-3000',
          'OH-3000',
          'ON-3000',
          'ON-4000',
          'ONH-3000',
        ];
        function nowDate() {
          var date = new Date();
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var s_month = '' + month;
          if (s_month.length < 2) s_month = '0' + s_month;
          var day = date.getDate();
          var s_day = '' + day;
          if (s_day.length < 2) s_day = '0' + s_day;
          return year + '-' + s_month + '-' + s_day;
        }
        function SetCookie(name, value) {
          //两个参数，一个是cookie的名子，一个是值
          var Days = 30; //此 cookie 将被保存 30 天
          var exp = new Date(); //new Date("December 31, 9998");
          exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
          document.cookie =
            name + '=' + escape(value) + ';expires=' + exp.toGMTString();
        }
        function getCookie(name) {
          //取cookies函数
          var arr = document.cookie.match(
            new RegExp('(^| )' + name + '=([^;]*)(;|$)')
          );
          if (arr != null) return unescape(arr[2]);
          return null;
        }
        function delCookie(name) {
          //删除cookie
          var exp = new Date();
          exp.setTime(exp.getTime() - 1);
          var cval = getCookie(name);
          if (cval != null)
            document.cookie =
              name + '=' + cval + ';expires=' + exp.toGMTString();
        }
        //   var object = {};
        //   _.extend(object, Backbone.Events);
        // var object2 = {};
        //   _.extend(object2, Backbone.Events);
        //   object.on("alert", function(msg) {
        //     alert("object Triggered " + msg);
        //   });
        //   object2.on("alert", function(msg) {
        //     alert("object2 Triggered " + msg);
        //   });
        //   object.trigger("alert", "an event");
        //   object2.trigger("alert", "an event");
        var user = '{{ user }}';
        $('#dropdownMenu1_text').text(user);
        var csrf_token = '{{ csrf_token }}';
        var cache = {};
        var cache_item = {};
        // Backbone.ajax = function() {
        //   var param = arguments[0];
        //   if (param.success) {//修改响应数据
        //     var oldSuccess = param.success;
        //     var oldError = param.error;
        //     param.success = function() {
        //       var newArguments = Array.prototype.slice.call(arguments, 0);
        //       //newArguments[0]=newArguments[0].data;//remove other
        //       oldSuccess.apply(null, newArguments);
        //     };
        //   }
        //   //2发送请求
        //   //console.log("Backbone.ajax");
        //   //console.log(param);
        //   //console.log(param.data);
        //   return $.ajax({
        //     url : param.url,
        //     data : param.data,
        //     success : param.success,
        //     type : param.type,
        //     dataType :param.dataType
        //     contentType : 'multipart/form-data'//application/x-www-form-urlencoded, multipart/form-data, or text/plain
        //   });

        // };
        var myglobal = {};
        var Contact = Backbone.Model.extend({
          urlRoot: '/rest/Contact/',
          //fields:['id', 'yonghu', 'addr', 'channels', 'yiqixinghao', 'yiqibh', 'baoxiang', 'shenhe', 'yujifahuo_date', 'tiaoshi_date', 'hetongbh', 'method'],
          defaults: function() {
            var d = new Date();
            var dstr =
              d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
            return {
              id: undefined,
              yonghu: '',
              addr: '',
              channels: '',
              yiqixinghao: '',
              yiqibh: '',
              baoxiang: '',
              shenhe: '',
              yujifahuo_date: nowDate(),
              tiaoshi_date: nowDate(),
              hetongbh: '',
              method: '',
            };
          },
        });
        var ContactList = Backbone.Collection.extend({
          model: Contact,
          url: '/rest/Contact/',
          //localStorage: new Backbone.LocalStorage("contacts-backbone"),
          parse: function(data, options) {
            console.log('parse response:' + data.total);
            if (data.total != undefined) myglobal.total = data.total;
            return data.data;
          },
        });
        var UsePack = Backbone.Model.extend({
          urlRoot: '/rest/UsePack/',
          defaults: function() {
            return {
              id: undefined,
              contact_id: undefined,
              pack_id: undefined,
              pack_name: undefined,
            };
          },
        });
        var Pack = Backbone.Model.extend({
          urlRoot: '/rest/Pack/',
          defaults: function() {
            return {
              id: undefined,
              name: '',
            };
          },
        });
        //{"itemid": 44, "ct": 1, "name": "镍箔", "pack": 111, "id": 1147},
        var Item = Backbone.Model.extend({
          urlRoot: '/rest/Item/',
          defaults: function() {
            return {
              id: undefined,
              name: '',
              guige: '',
              bh: '',
              danwei: '',
            };
          },
        });
        var PackItem = Backbone.Model.extend({
          urlRoot: '/rest/PackItem/',
          defaults: function() {
            return {
              id: undefined,
              pack_id: undefined,
              item_id: undefined,
              ct: 0,
              item_name: undefined,
            };
          },
        });
        var PackItemList = Backbone.Collection.extend({
          model: PackItem,
          url: '/rest/PackItem/',
          parse: function(data, options) {
            //console.log("parse response");
            // if(data.total)
            //   myglobal.total=data.total;
            return data.data;
          },
        });
        var UsepackList = Backbone.Collection.extend({
          model: UsePack,
          url: '/rest/UsePack/',
          parse: function(data, options) {
            //console.log("parse response");
            // if(data.total)
            //   myglobal.total=data.total;
            return data.data;
          },
        });
        var contacts = new ContactList();
        var ContactEditView = Backbone.View.extend({
          tagName: 'div',
          template: _.template($('#contact-edit-template').html()),
          events: {
            'click #bt_file': 'uploadfile',
            'click #bt_save': 'save',
            'click #bt_clear': 'myclear',
            'click #bt_clearid': 'myclearid',
          },
          upload_click: function(event) {
            //console.log("upload_click");
            //console.log(event.data);
            var view = event.data.view;
            $.ajax({
              context: view,
              url: '/rest/upload',
              type: 'POST',
              cache: false,
              data: new FormData($('#uploadForm')[0]),
              processData: false,
              contentType: false,
            })
              .done(function(res) {
                //console.log("done");
                //console.log(res);//{"success":True, "files":fullfilepath}
                data = JSON.parse(res);
                if (data.success) {
                  //$("#method").val(data.files);
                  view.model.set({ method: data.files });

                  $('#uploadForm').dialog('close');
                  //console.log(this);
                } else {
                }
              })
              .fail(function(res) {});
          },
          uploadfile: function() {
            $('#upload').bind('click', { view: this }, this.upload_click);
            $('#uploadForm').dialog({
              //bgiframe: true,
              //resizable: false, height: "530",width:"200",
              //height:140,
              modal: true,
              overlay: {
                backgroundColor: '#000',
                opacity: 0.5,
              },
              autoOpen: true,
              close: function(event, ui) {
                $(this).dialog('destroy');
              },
            });
          },
          save_new: function() {
            //console.log("upload_click");
            var data = new FormData(this.$('#uploadForm')[0]);
            $.ajax({
              context: this,
              url: '/rest/Contact/',
              cache: false,
              data: data,
              processData: false,
              contentType: false,
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(errorThrown);
              },
              success: function(data) {
                console.log('upload done');
                //console.log(data);
                // if (data.success) {
                //     addrow(data.data.id, data.data.name);
                //     $("#dialog").dialog("close");
                // }
              },
            });
          },
          save: function() {
            var data = {};
            for (var fname in this.model.attributes) {
              if (fname != 'id') {
                //var name=this.$("#"+fname).attr("name");
                var value = this.$('#' + fname).val();
                if (value) {
                  var node = this.$('#' + fname);
                  if (node.attr('type') == 'checkbox') {
                    data[fname] = node[0].checked;
                  } else {
                    data[fname] = value;
                  } //else
                } //if
              } //if
            } //for
            var newcontact = false;
            if (this.model.get('id') == undefined) {
              contacts.add(this.model);
              newcontact = true;
            }
            this.model.set(data);
            var self = this;
            this.model.save(null, {
              emulateJSON:true,
              success: function(context, model, resp, options) {
                console.log(resp);
                if (model.success) {
                  context.set(model.data);
                  if (newcontact) {
                    self.parentview.changeModel(self.model);
                  }
                } else {
                  console.log(model.message);
                }
              },
            });
          },
          myclear: function() {
            ////console.log("clear click");
            this.model = new Contact();
            this.render();
          },
          myclearid: function() {
            //copy
            //this.$("#id").val(undefined);
            //console.log("clearid");
            data = {}; //copy data from old model
            for (var fname in this.model.attributes) {
              if (fname != 'id') {
                data[fname] = this.model.get(fname);
              }
            }
            data['id'] = undefined; //id undefined save use POST,else use PUT
            this.model = new Contact();
            this.model.set(data);
            this.render();
            this.parentview.changeModel(this.model);
            this.listenTo(this.model, 'change', this.render); //model change must relisten
            this.listenTo(this.model, 'destroy', this.remove);
          },
          initialize: function() {
            this.parentview = arguments[0].parentview;
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
          },
          render: function() {
            this.$('.mydate').datepicker('destroy');
            this.$el.html(this.template(this.model.toJSON()));
            this.$('.mydate').datepicker({
              dateFormat: 'yy-mm-dd',
              numberOfMonths: 1, //显示几个月
              showButtonPanel: true, //是否显示按钮面板
              clearText: '清除', //清除日期的按钮名称
              closeText: '关闭', //关闭选择框的按钮名称
              yearSuffix: '年', //年的后缀
              showMonthAfterYear: true, //是否把月放在年的后面
              //defaultDate:'2011-03-10',//默认日期
              //minDate:'2011-03-05',//最小日期
              //maxDate:'2011-03-20',//最大日期
              monthNames: [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月',
              ],
              dayNames: [
                '星期日',
                '星期一',
                '星期二',
                '星期三',
                '星期四',
                '星期五',
                '星期六',
              ],
              dayNamesShort: [
                '周日',
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
              ],
              dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
            });
            return this;
          },
        });
        /////////////////////////////////////////////////////////////////////////////////////
        var ContactView = Backbone.View.extend({
          tagName: 'tr',
          template: _.template($('#contact-template').html()),
          events: {
            'click .contact_edit': 'edit',
            'click .contact_delete': 'delete',
            //"click .contact_usepack" : "usepack",
            'click .contact_zxd': 'zxd',
            'click .contact_zs': 'zs',
            'click .contact_detail': 'detail',
          },
          detail: function() {
            window.open(
              '/parts/showcontact/?id=' + this.model.get('id'),
              'detail',
              'height=800,width=800,resizable=yes,scrollbars=yes'
            );
          },
          zxd: function() {
            window.open('/parts/zhuangxiangdan?id=' + this.model.get('id'));
          },
          zs: function() {
            window.open('/parts/tar?id=' + this.model.get('id'));
          },
          edit: function() {
            //console.log("edit");
            //console.log(arguments)
            var editview = new ContactEditView2({ model: this.model });
            editview.showdialog();
            // App.editview.model=this.model;
            //App.$("#section_edit").show();
          },
          true_delete: function() {
            var data = {};
            data.id = this.model.get('id');
            data.csrfmiddlewaretoken = csrf_token;
            data = JSON.stringify(data);
            this.model.destroy({ data: data, contentType: 'application:json' });
          },
          delete: function() {
            //delete-template
            var deleteview = new DeleteView({
              callback: this.true_delete,
              obj: this,
            });
            deleteview.render();
            deleteview.$el.dialog({
              modal: true,
              overlay: {
                backgroundColor: '#000',
                opacity: 0.5,
              },
              autoOpen: true,
              close: function(event, ui) {
                $(this).dialog('destroy');
              },
            });
          },
          initialize: function() {
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
          },
          render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            // this.input = this.$('.edit');
            return this;
          },
        });
        ///////////////////////////
        var ContactEditView2 = Backbone.View.extend({
          tagName: 'div',
          template: _.template($('#contact-edit2-template').html()),
          initialize: function() {
            this.$el.html(this.template(this.model.toJSON()));
            this.cev = new ContactEditView({
              model: this.model,
              parentview: this,
            });
            var v = this.cev.render().el;
            this.$('#id_contact_edit').append(v);
            this.pev = new UsepackListView({ model: this.model });
            var v = this.pev.render().el;
            if (this.model.get('id') == undefined) {
              this.$('#id_usepack_edit').attr('hidden', true);
            } else {
              this.$('#id_usepack_edit').attr('hidden', false);
            }
            this.$('#id_usepack_edit').append(v);
          },
          showdialog: function() {
            this.render(); //must call because editview has no element now;
            var self = this;
            this.$el.dialog({
              width: 700, //height:800,
              modal: false,
              overlay: {
                //backgroundColor: '#0F0'
                //,
                opacity: 0.5,
              },
              autoOpen: true,
              open: function(event, ui) {
                //console.log("dialog open function");
                //$(ui).find('.mydate').datepicker({
                //  $(".mydate").datepicker({
                //       dateFormat: 'yy-mm-dd',
                //       numberOfMonths:1,//显示几个月
                //       showButtonPanel:true,//是否显示按钮面板
                //       clearText:"清除",//清除日期的按钮名称
                //       closeText:"关闭",//关闭选择框的按钮名称
                //       yearSuffix: '年', //年的后缀
                //       showMonthAfterYear:true,//是否把月放在年的后面
                //       //defaultDate:'2011-03-10',//默认日期
                //       //minDate:'2011-03-05',//最小日期
                //       //maxDate:'2011-03-20',//最大日期
                //       monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                //       dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
                //       dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
                //       dayNamesMin: ['日','一','二','三','四','五','六'],
                // });
              },
              close: function(event, ui) {
                //console.log("dialog close function");
                //$(ui).find('.mydate').datepicker("destroy");
                //$('.mydate').datepicker("destroy");
                $(this).dialog('destroy');
              },
            });
            this.cev.$('#yiqixinghao').autocomplete({
              minLength: 1,
              source: availableTags,
            });
            this.pev
              .$('#auto_pack1')
              .autocomplete({
                minLength: 1,
                focus: function(event, ui) {
                  //$( "#auto_pack1" ).val( ui.item.value);
                  return false;
                },
                select: function(event, ui) {
                  self.pev.addrow(ui.item.id, ui.item.name);
                  return false;
                },
                source: function(request, response) {
                  var term = request.term;
                  request = { search: term };
                  if (term in cache) {
                    data = cache[term];
                    response(data);
                    return;
                  }
                  $.getJSON('/rest/Pack', request, function(data, status, xhr) {
                    cache[term] = data.data;
                    response(data.data);
                  });
                },
              })
              .autocomplete('instance')._renderItem = function(ul, item) {
              return $('<li>')
                .append('<a>' + item.id + '_' + item.name + '</a>')
                .appendTo(ul);
            };
          },
          changeModel: function(model) {
            console.log('changeModel=========================');
            console.log(this.model.get('id'));
            console.log(model.get('id'));
            // if (this.model.get("id")!=model.get("id"))
            // {
            this.model = model;
            this.pev.model = this.model;
            this.pev.render();
            this.pev.mysetdata(); //refresh data
            if (this.model.get('id') == undefined) {
              this.$('#id_usepack_edit').attr('hidden', true);
            } else {
              this.$('#id_usepack_edit').attr('hidden', false);
            }
            // }
          },
          render: function() {
            return this;
          },
        });
        ////////////////////////////////////////////////////////////////////////////
        var AppView = Backbone.View.extend({
          el: $('#todoapp'),
          events: {
            'click #id_bt_search': 'mysearch',
            'click #id_bt_new': 'newcontact',
            'click #id_login': 'showlogin',
            'click #id_logout': 'showlogout',
            'click .baoxiang': 'baoxiang',
          },
          newcontact: function() {
            var editview = new ContactEditView2({ model: new Contact() });
            editview.showdialog();
          },
          mysearch: function() {
            myglobal.search = this.$('#id_input_search').val();
            myglobal.start = 0;
            //console.log("search="+myglobal.search);
            App.mysetdata();
          },
          baoxiang: function(event) {
            myglobal.baoxiang = event.target.text;
            myglobal.start = 0;
            App.mysetdata();
          },
          button_prev_click: function() {
            myglobal.start = myglobal.start - myglobal.limit;
            if (myglobal.start < 0) myglobal.start = 0;
            //contacts.fetch({ data: { start:myglobal.start,limit:myglobal.limit} });
            App.mysetdata();
            ////console.log(myglobal.start+","+myglobal.limit+","+myglobal.total);
          },
          button_next_click: function() {
            myglobal.start = myglobal.start + myglobal.limit;
            if (myglobal.start > myglobal.total - myglobal.limit)
              myglobal.start = myglobal.total - myglobal.limit; //total >limit
            if (myglobal.start < 0) myglobal.start = 0;
            App.mysetdata(); //contacts.fetch({ data: { start:myglobal.start,limit:myglobal.limit} });
            ////console.log(myglobal.start+","+myglobal.limit+","+myglobal.total);
          },
          mysetdata: function() {
            this.$('#contact-list').empty();
            contacts.fetch({
              reset: true,
              data: {
                start: myglobal.start,
                limit: myglobal.limit,
                search: myglobal.search,
                baoxiang: myglobal.baoxiang,
              },
              success: function() {
                //console.log(contacts.length+" contacts")
                this.$('#page').empty();
                var right = myglobal.start + myglobal.limit;
                if (right > myglobal.total) right = myglobal.total;
                if (myglobal.total < 1) {
                  this.$('#page').append(
                    0 + '...' + right + ' of ' + myglobal.total
                  );
                } else {
                  this.$('#page').append(
                    myglobal.start + 1 + '...' + right + ' of ' + myglobal.total
                  );
                }
              },
              error: function() {},
            }); //{ reset: true,data: { start:this.start,limit:this.limit} });
          },
          showlogout: function() {
            //console.log("showlogout");
            var self = this;
            $.ajax({
              context: App,
              type: 'POST',
              url: '/rest/logout',
              complete: function() {},
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                //console.log(errorThrown);
              },
              success: function(data) {
                //console.log("ajax done");
                //console.log(data);
                data = JSON.parse(data);
                //console.log(data);
                $('#dropdownMenu1_text').text('AnonymousUser');
                $('#li_login').attr('hidden', false);
                $('#li_logout').attr('hidden', true);
                self.mysetdata();
              },
            });
          },
          showlogin: function() {
            this.userv = new UserView({ model: new User(), app: this });
            //this.$("#current_user").append(this.userv.render().el);
            this.userv.render();
            this.userv.$el.dialog({
              width: 400,
              height: 250,
              modal: true,
              overlay: {
                backgroundColor: '#000',
                opacity: 0.5,
              },
              autoOpen: true,
              close: function(event, ui) {
                $(this).dialog('destroy');
              },
            });
          },
          initialize: function() {
            myglobal.start = 0;
            myglobal.limit = 9;
            myglobal.total = 0;
            myglobal.search = '';
            this.listenTo(contacts, 'add', this.addOne);
            this.listenTo(contacts, 'reset', this.addAll);
            this.listenTo(contacts, 'all', this.render);
            this.main = this.$('#main');

            //this.$("#section_edit").append(this.editview.render().el);
            this.$('#bt_prev').bind('click', {}, this.button_prev_click);
            this.$('#bt_next').bind('click', {}, this.button_next_click);

            if (user == 'AnonymousUser') {
              this.showlogin();
            } else {
              this.mysetdata();
            }
          },
          render: function() {
            ////console.log("contact-list render");
            // if (contacts.length) {
            //   this.main.show();
            // } else {
            //   this.main.hide();
            //   //this.$("#section_edit").show();
            // }
          },
          addOne: function(contact) {
            var view = new ContactView({ model: contact });
            this.$('#contact-list').append(view.render().el);
          },
          addAll: function() {
            contacts.each(this.addOne, this);
          },
        });
        //////////////////////////////////////////////////////////////////////////
        var User = Backbone.Model.extend({
          defaults: function() {
            return {
              username: 'mahongquan',
              password: '333333',
              csrfmiddlewaretoken: csrf_token,
            };
          },
        });
        //////////////////////////////////////////////////////////////////////////
        var UserView = Backbone.View.extend({
          tagName: 'div',
          template: _.template($('#login-template').html()),
          events: {
            'click #bt_login': 'login',
          },
          initialize: function() {
            this.app = arguments[0].app;
            this.listenTo(this.model, 'change', this.render);
          },
          render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
          },
          login: function() {
            //console.log("login");
            var data = {};
            for (var name in this.model.attributes) {
              //console.log(name);
              var value = this.$('#' + name).val();
              if (value) {
                var node = this.$('#' + name);
                if (node.attr('type') == 'checkbox') {
                  data[name] = node[0].checked;
                } else {
                  data[name] = value;
                }
              }
            } //for
            //console.log(data);
            var self = this;
            $.ajax({
              context: App,
              type: 'POST',
              url: '/rest/login',
              data: data,
              complete: function() {},
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                //console.log(errorThrown);
              },
              success: function(data) {
                //console.log("ajax done");
                //console.log(data);
                data = JSON.parse(data);
                if (data.success) {
                  user = data.data.name;
                  csrf_token = getCookie('csrftoken'); //Ext.util.Cookies.get("csrftoken");
                  $('#dropdownMenu1_text').text(user);
                  $('#li_login').attr('hidden', true);
                  $('#li_logout').attr('hidden', false);
                  self.$el.dialog('close');
                  self.app.mysetdata();
                }
              },
            });
          },
        });
        /////////////////////////////////////////////////////////////////////////////
        var DeleteView = Backbone.View.extend({
          tagName: 'div',
          template: _.template($('#delete-template').html()),
          events: {
            'click #id_ok': 'ok',
            'click #id_cancel': 'cancel',
          },
          initialize: function() {
            //console.log(arguments);
            this.callback = arguments[0].callback;
            this.obj = arguments[0].obj;
          },
          render: function() {
            this.$el.html(this.template());
            return this;
          },
          cancel: function() {
            //console.log("cancel");
            this.$el.dialog('close');
          },
          ok: function() {
            //console.log("ok");
            //var contactlistview=this.model;//ture object is view
            //contactlistview.true_delete();
            //this.callback();
            this.callback.apply(this.obj, []);
            this.$el.dialog('close');
          },
        });
        /////////////////////////////////////////////////////////usepackListView
        var UsepackListView = Backbone.View.extend({
          tagName: 'div', //el: $("#section_usepack"),
          template: _.template($('#usepack-list-template').html()),
          events: {
            'click #id_new_usepack': 'new_usepack',
          },
          new_usepack: function() {
            //console.log("select_usepack");
            var p = new Pack();
            var self = this;
            p.set({ name: this.$('#new_pack1').val() });
            p.save(null, {
              success: function(context, model, resp, options) {
                //console.log(options);
                //console.log("save finish");
                //model.set(resp.success.arguments[0].data);
                context.set(model.data);
                //self.usepacks.add(p);
                //alert("success");
                self.addrow(p.get('id'), p.get('name'));
                self.$('#new_pack1').val('');
              },
            });
          },
          mysetdata: function() {
            this.$('#usepack-list').empty();
            this.usepacks.fetch({
              reset: true,
              data: { contact_id: this.model.get('id') },
              success: function() {
                ////console.log(this.usepacks.length+" usepacks")
                // this.$("#page").empty();
                // var right=myglobal.start+myglobal.limit
                // this.$("#page").append((myglobal.start+1)+"..."+right+" of "+myglobal.total);
              },
              error: function() {},
            }); //{ reset: true,data: { start:this.start,limit:this.limit} });
          },
          initialize: function() {
            this.usepacks = new UsepackList();
            this.listenTo(this.usepacks, 'add', this.addOne);
            this.listenTo(this.usepacks, 'reset', this.addAll);
            this.listenTo(this.usepacks, 'all', this.render);
            this.$el.html(this.template(this.model.toJSON()));
            this.mysetdata();
          },
          addrow: function(pk, value) {
            //console.log(pk);
            //console.log(value);
            var p = new UsePack();
            var self = this;
            p.set({ contact_id: this.model.get('id'), pack_id: pk });
            p.save(null, {
              success: function(context, model, resp, options) {
                //console.log(options);
                //console.log("save finish");
                //model.set(resp.success.arguments[0].data);
                context.set(model.data);
                self.usepacks.add(p);
              },
            });
          },
          render: function() {
            //console.log("usepack-list render");//_.template($('#usepack-list-template').html()),
            //this.$el.html(this.template(this.model.toJSON()));
            return this;
          },
          addOne: function(usepack) {
            //console.log("addOne usepacks");
            var view = new UsepackView({ model: usepack });
            var viewc = view.render().el;
            //console.log(viewc);
            this.$('#usepack-list').append(viewc);
          },
          addAll: function() {
            //console.log("addAll usepacks");
            this.usepacks.each(this.addOne, this);
          },
        });
        //////////////////////////////////////////////////////////UsepackView
        var UsepackView = Backbone.View.extend({
          tagName: 'tr',
          template: _.template($('#usepack-template').html()),
          events: {
            'click .usepack_edit': 'edit',
            'click .usepack_delete': 'delete',
          },
          edit: function() {
            //console.log("edit");
            var packitemListView = new PackItemListView({ model: this.model });
            packitemListView.$el.dialog({
              width: 800, //height:500,
              modal: true,
              overlay: {
                backgroundColor: '#000',
                opacity: 0.5,
              },
              autoOpen: true,
              close: function(event, ui) {
                $(this).dialog('destroy');
              },
            });
            packitemListView
              .$('#auto_item1')
              .autocomplete({
                minLength: 1,
                focus: function(event, ui) {
                  //$( "#auto_pack1" ).val( ui.item.value);
                  return false;
                },
                select: function(event, ui) {
                  packitemListView.addrow(ui.item.id, ui.item.name);
                  return false;
                },
                source: function(request, response) {
                  var term = request.term;
                  request = { search: term };
                  if (term in cache_item) {
                    data = cache_item[term];
                    response(data.data);
                    return;
                  }
                  $.getJSON('/rest/Item', request, function(data, status, xhr) {
                    cache_item[term] = data;
                    response(data.data);
                  });
                },
              })
              .autocomplete('instance')._renderItem = function(ul, item) {
              return $('<li>')
                .append(
                  '<a>' + item.id + '_' + item.name + '_' + item.guige + '</a>'
                )
                .appendTo(ul);
            };
          },
          true_delete: function() {
            var data = {};
            data.id = this.model.get('id');
            data.csrfmiddlewaretoken = csrf_token;
            data = JSON.stringify(data);
            this.model.destroy({ data: data, contentType: 'application:json' });
          },
          delete: function() {
            var deleteview = new DeleteView({
              callback: this.true_delete,
              obj: this,
            });
            deleteview.render();
            deleteview.$el.dialog({
              modal: true,
              overlay: {
                backgroundColor: '#000',
                opacity: 0.5,
              },
              autoOpen: true,
              close: function(event, ui) {
                $(this).dialog('destroy');
              },
            });
          },
          initialize: function() {
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
          },
          render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
          },
        });
        /////////////////////////////
        ///////
        /////////////////////////////////////////////////////////usepackListView
        var PackItemListView = Backbone.View.extend({
          tagName: 'div', //el: $("#section_usepack"),
          template: _.template($('#packitem-list-template').html()),
          events: {
            'click #id_new_packitem': 'new_packitem',
          },
          new_packitem: function() {
            //console.log("new packitem");
            var p = new Item();
            var self = this;
            p.set({ name: this.$('#new_item1').val(), ct: 1 });
            p.save(null, {
              success: function(context, model, resp, options) {
                //console.log(options);
                //console.log("save finish");
                //model.set(resp.success.arguments[0].data);
                context.set(model.data);
                //self.usepacks.add(p);
                //alert("success");
                self.addrow(p.get('id'), p.get('name'));
                self.$('#new_item1').val('');
              },
            });
          },
          mysetdata: function() {
            this.$('#packitem-list').empty();
            this.packitems.fetch({
              reset: true,
              data: {
                pack_id: this.model.get('pack_id'),
                start: 0,
                limit: 200,
              },
              success: function() {
                ////console.log(this.usepacks.length+" usepacks")
                // this.$("#page").empty();
                // var right=myglobal.start+myglobal.limit
                // this.$("#page").append((myglobal.start+1)+"..."+right+" of "+myglobal.total);
              },
              error: function() {},
            }); //{ reset: true,data: { start:this.start,limit:this.limit} });
          },
          initialize: function() {
            this.packitems = new PackItemList();
            this.listenTo(this.packitems, 'add', this.addOne);
            this.listenTo(this.packitems, 'reset', this.addAll);
            this.listenTo(this.packitems, 'all', this.render);
            this.$el.html(this.template(this.model.toJSON()));
            // this.pie=new PackItemEditView({model:new PackItem()});
            // this.$("#packitem-edit").append(this.pie.render().el);
            this.mysetdata();
          },
          addrow: function(pk, value) {
            //console.log(pk);
            //console.log(value);
            var p = new PackItem();
            var self = this;
            p.set({ pack_id: this.model.get('pack_id'), item_id: pk, ct: 1 });
            p.save(null, {
              success: function(context, model, resp, options) {
                //console.log(options);
                //console.log("save finish");
                //model.set(resp.success.arguments[0].data);
                context.set(model.data);
                self.packitems.add(p);
              },
            });
          },
          render: function() {
            //console.log("packitem-list render");//_.template($('#usepack-list-template').html()),
            //this.$el.html(this.template(this.model.toJSON()));
            //return this;
          },
          addOne: function(packitem) {
            //console.log("addOne usepacks");
            var view = new PackItemView({ model: packitem });
            var viewc = view.render().el;
            //console.log(viewc);
            this.$('#packitem-list').append(viewc);
          },
          addAll: function() {
            //console.log("addAll usepacks");
            this.packitems.each(this.addOne, this);
          },
        });
        //////////////////////////////////////////////////////////UsepackView
        var PackItemView = Backbone.View.extend({
          tagName: 'tr',
          template: _.template($('#packitem-template').html()),
          events: {
            'click .packitem_edit': 'edit',
            'click .packitem_delete': 'delete',
          },
          edit: function() {
            //console.log("edit");
            var packitemedit = new PackItemEditView({ model: this.model });
            packitemedit.render();
            packitemedit.$el.dialog({
              width: 300,
              height: 400,
              modal: false,
              overlay: {
                backgroundColor: '#000',
                opacity: 0.5,
              },
              autoOpen: true,
              close: function(event, ui) {
                $(this).dialog('destroy');
              },
            });
          },
          true_delete: function() {
            var data = {};
            data.id = this.model.get('id');
            data.csrfmiddlewaretoken = csrf_token;
            data = JSON.stringify(data);
            this.model.destroy({ data: data, contentType: 'application:json' });
          },
          delete: function() {
            var deleteview = new DeleteView({
              callback: this.true_delete,
              obj: this,
            });
            deleteview.render();
            deleteview.$el.dialog({
              modal: true,
              overlay: {
                backgroundColor: '#000',
                opacity: 0.5,
              },
              autoOpen: true,
              close: function(event, ui) {
                $(this).dialog('destroy');
              },
            });
          },
          initialize: function() {
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
          },
          render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
          },
        });
        //////////////
        var PackItemEditView = Backbone.View.extend({
          tagName: 'div',
          template: _.template($('#packitem-edit-template').html()),
          events: {
            'click #bt_save_item': 'save',
          },
          save: function() {
            var item = {};
            var item_vs = this.$('.item');
            for (var i = 0; i < item_vs.length; i++) {
              console.log($(item_vs[i]).attr('id'));
              item[$(item_vs[i]).attr('id')] = $(item_vs[i]).val();
            }
            var data = {};
            var packitem_vs = this.$('.packitem');
            for (var i = 0; i < packitem_vs.length; i++) {
              console.log($(packitem_vs[i]).attr('id'));
              data[$(packitem_vs[i]).attr('id')] = $(packitem_vs[i]).val();
            }
            this.model.set({ Item: item });
            this.model.set(data);
            var self = this;
            this.model.save(null, {
              success: function(context, model, resp, options) {
                //console.log(options);
                //console.log("packitem save finish");
                //model.set(resp.success.arguments[0].data);
                context.set(model.data);
                self.$el.dialog('close');
              },
            });
          },
          initialize: function() {
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
          },
          render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
          },
        });
        var App = new AppView();
      });
    </script>
  </head>
  <body>
    <nav class="navbar navbar-inverse ">
      <!--  <div class="container"> -->
      <div class="navbar-header">
        <button
          type="button"
          class="navbar-toggle collapsed"
          data-toggle="collapse"
          data-target="#navbar"
          aria-expanded="false"
          aria-controls="navbar"
        >
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span> <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">装箱单</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/parts/copypack/">复制包</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
      <!--    </div> -->
    </nav>
    <div class="container table-responsive">
      <form hidden="true" id="uploadForm" enctype="multipart/form-data">
        <input id="file" type="file" name="file" />
        <button id="upload" type="button">上传</button>
      </form>
      <div id="todoapp">
        <div>
          <table>
            <tr>
              <!--   <td>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <span id="dropdownMenu1_text">Dropdown</span>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li id="li_login"hidden="true"><a href="#" id="id_login" >log in</a></li>
        <li id="li_logout"><a href="#" id="id_logout">log out</a></li>
      </ul>
    </div>
  </td> -->
              <td>
                <input
                  type="text"
                  id="id_input_search"
                  placeholder="合同 or 仪器编号"
                  value=""
                />
                <button id="id_bt_search" class="btm btn-info">搜索</button>
                <button id="id_bt_new" class="btn btn-primary">新合同</button>
              </td>
              <td>
                <div class="dropdown">
                  <button
                    class="btn btn-default dropdown-toggle"
                    type="button"
                    id="dropdownMenu2"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="true"
                  >
                    <span id="dropdownMenu2_text">过滤</span>
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                    <li><a href="#" class="baoxiang">马红权</a></li>
                    <li><a href="#" class="baoxiang">陈旺</a></li>
                    <li><a href="#" class="baoxiang">吴振宁</a></li>
                    <li><a href="#" class="baoxiang">周伟</a></li>
                    <li><a href="#" class="baoxiang">刘银凯</a></li>
                    <li>
                      <a href="#" class="baoxiang"
                        ><span class="glyphicon glyphicon-asterisk"></span
                      ></a>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div id="main" style="min-height:200px;">
          <table class="table-bordered">
            <thead>
              <tr>
                <td>ID</td>
                <td>用户单位</td>
                <td>客户地址</td>
                <td>通道配置</td>
                <td>仪器型号</td>
                <td>仪器编号</td>
                <td>包箱</td>
                <td>审核</td>
                <td>预计发货时间</td>
                <td>调试时间</td>
                <td>合同编号</td>
                <td>方法</td>
                <td>操作</td>
              </tr>
            </thead>
            <tbody id="contact-list"></tbody>
          </table>
          <a id="bt_prev">前一页</a> <label id="page">page/page</label
          ><a id="bt_next">后一页</a>
        </div>
      </div>
      <script type="text/template" id="contact-template">
          <td>
              <%- id %>
         </td><td>
              <%- yonghu %>
         </td><td>
              <%- addr %>
         </td><td>
              <%- channels %>
         </td><td>
              <%- yiqixinghao %>
         </td><td>
              <%- yiqibh %>
         </td><td>
              <%- baoxiang %>
         </td><td>
              <%- shenhe %>
         </td><td>
              <%- yujifahuo_date %>
         </td><td>
              <%- tiaoshi_date %>
         </td><td>
              <a class="contact_edit">[[<%- hetongbh %>]]</a>
         </td><td>
              <a href="/media/<%- method %>"><%- method %></a>
         </td>
         <td><a class="contact_detail" data="<%- id %>">详细</a>
        <a class="contact_zxd" data="<%- id %>">装箱单</a><a class="contact_zs" data="<%- id %>">校准证书</a><!-- <a  class="contact_delete" data="<%- id %>">删除</a>
         </td> -->
      </script>
      <script type="text/template" id="contact-edit2-template">
        <div id="id_contact_edit"></div>
        <div id="id_usepack_edit"></div>
      </script>
      <script type="text/template" id="contact-edit-template">
                <table id="table_input" class="table-condensed" >
        <tr>
                        <td>
                            ID:
                        </td>
                        <td>
                            <input type="text" id="id" name="id" readonly="true"      value="<%- id %>">
                        </td>
                <!--     </tr><tr> -->
                        <td>
                            <label>用户单位:</label>
                        </td>
                        <td>
                            <input type="text" id="yonghu" name="yonghu" value="<%- yonghu %>">
                        </td>
                    </tr><tr>
                        <td>
                            客户地址:
                        </td>
                        <td>
                            <input type="text" id="addr" name="addr" value="<%- addr %>">
                        </td>
               <!--      </tr><tr> -->
                        <td>
                            通道配置:
                        </td>
                        <td>
                            <input type="text" id="channels" name="channels" value="<%- channels %>">
                        </td>
                    </tr><tr>
                        <td>
                            <label>仪器型号:</label>
                        </td>
                        <td>
                            <input type="text" id="yiqixinghao" name="yiqixinghao" value="<%- yiqixinghao %>">
                        </td>
          <!--           </tr><tr> -->
                        <td>
                            <label>仪器编号:</label>
                        </td>
                        <td>
                            <input type="text" id="yiqibh" name="yiqibh" value="<%- yiqibh %>">
                        </td>
                    </tr><tr>
                        <td>
                            <label>包箱:</label>
                        </td>
                        <td>
                            <input type="text" id="baoxiang" name="baoxiang" value="<%- baoxiang %>">
                        </td>
        <!--             </tr><tr> -->
                        <td>
                            审核:
                        </td>
                        <td>
                            <input type="text" id="shenhe" name="shenhe" value="<%- shenhe %>">
                        </td>
                    </tr><tr>
                        <td>
                            <label>预计发货时间:</label>
                        </td>
                        <td>
                            <input type="text" class="mydate" id="yujifahuo_date" name="yujifahuo_date" value="<%- yujifahuo_date %>">
                        </td>
        <!--             </tr><tr> -->
                        <td>
                            调试时间:
                        </td>
                        <td>
                            <input type="text" class="mydate" id="tiaoshi_date" name="tiaoshi_date" value="<%- tiaoshi_date %>">
                        </td>
                    </tr><tr>
                        <td>
                            <label>合同编号:</label>
                        </td>
                        <td>
                            <input type="text" id="hetongbh" name="hetongbh" value="<%- hetongbh %>">
                        </td>
        <!--             </tr><tr> -->
                        <td>
                            方法:
                        </td>
                        <td>
                        <input type="text" id="id" name="id" readonly="true" value="<%- method %>"><button class="btn" id="bt_file">选取文件</button>
                        </td>
                    </tr>        </table>
               <div align="center"> <button class="btn btn-primary" id="bt_save">保存</button> <button class="btn" id="bt_clear">清除</button> <button class="btn" id="bt_clearid">复制</button><div>
                <div id="id_usepacks"></div>
      </script>
      <script type="text/template" id="login-template">
        <table class="table-condensed">
        <tr hidden="true">
                <td>
                    <label>csrfmiddlewaretoken:</label>
                </td>
                <td>
                    <input type="text" id="csrfmiddlewaretoken"  value="<%- csrfmiddlewaretoken %>">
                </td>
          </tr>
          <tr>
                <td>
                    <label>用户名:</label>
                </td>
                <td>
                    <input type="text" id="username"  value="<%- username %>">
                </td>
          </tr>
          <tr>
                <td>
                    <label>密码:</label>
                </td>
                <td>
                    <input type="text" id="password"  value="<%- password %>">
                </td>
          </tr>
        </table>
        <button id="bt_login">提交</button>
      </script>
      <script type="text/template" id="delete-template">
        <table >
          <tr>
                <td>是否确定?</td>
          </tr>
          <tr>
                <td>
                    <button id="id_ok">确定</button>
                </td>
                <td>
                    <button id="id_cancel">取消</button>
                </td>
          </tr>
        </table>
      </script>
      <script type="text/template" id="usepack-list-template">
        <div class="container">
           <p>usepack list </p>
            <!-- div id="contact-info">
             <table>
            <tr><td>id：</td><td><%- id %></td></tr>
            <tr><td>合同号：</td><td><%- hetongbh %></td></tr>
            </table>
            </div -->
            <table  class="table-bordered"  width="600px">
          　<thead>
          　　<tr>
          　　　<td>ID</td><td>包名称</td><td >合同</td><td >包</td><td hidden="true">合同号</td><td>操作</td>
          　　</tr>
         　</thead>
            <tbody id="usepack-list">
            </tbody>
            </table>
            <div style="padding: 5px 5px 50px 5px;min-height:300px">  <!-- leave margin to show autocomplete items -->
            <p><input id="auto_pack1" placeholder="输入包"></p>
            <p><input id="new_pack1"  placeholder="新包"><button class="btn btn-info" id="id_new_usepack">新包</button></p>
            </div>
        </div>
      </script>
      <script type="text/template" id="usepack-template">
        <td><%- id %></td><td><%- pack_name %></td><td ><%- contact_id %></td><td ><%- pack_id %></td><td hidden="true" ><%- hetongbh %></td><td><button class="usepack_edit">编辑</button><button  class="usepack_delete" >删除</button></td>
      </script>
      <script type="text/template" id="packitem-list-template">
        <div class="container">
            <div id="pack-info">
            <table>
            <tr><td>id：</td><td><%- id %></td></tr>
            <tr><td>包名称：</td><td><%- pack_name %></td></tr>
            </table>
            </div>
            <table  class="table-bordered" >
          　<thead>
          　　<tr>
          　　　<td>ID</td><td>编号</td><td>名称</td><td>规格</td><td>数量</td><td hidden="true">pack</td><td hidden="true">备件id</td><td>操作</td>
          　　</tr>
         　</thead>
            <tbody id="packitem-list">
            </tbody>
            </table>
            <section id="packitem-edit">
            </section>
            <div style="padding: 5px 5px 50px 5px;min-height:300px">  <!-- leave margin to show autocomplete items -->
            <p><input id="auto_item1" placeholder="输入备件"></p>
            <p><input id="new_item1"  placeholder="新备件名称"><button id="id_new_packitem">新备件</button></p>
            </div>
        </div>
      </script>
      <!--   //{"itemid": 44, "ct": 1, "name": "镍箔", "pack": 111, "id": 1147}, -->
      <script type="text/template" id="packitem-template">
        <td><%- id %></td><td><%- item_bh %></td><td><%- item_name %></td><td><%- item_guige %></td><td><%- ct %><%- item_danwei %></td><td hidden="true"><%- pack_id %></td><td hidden="true"><%- item_id %></td><td><button class="packitem_edit" data="<%- id %>">编辑</button><button  class="packitem_delete" data="<%- id %>">删除</button></td>
      </script>
      <script type="text/template" id="packitem-edit-template">
        <table  class="table-condensed" >
                <tr>
                    <td>
                        <label>ID:</label>
                    </td>
                    <td>
                        <input type="text" id="id" readonly="true"      value="<%- id %>">
                    </td>
                </tr>
                 <tr>
                    <td>
                        <label>备件id:</label>
                    </td>
                    <td>
                        <input type="text" id="id"  class="item" readonly="true"      value="<%- item_id %>">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>编号:</label>
                    </td>
                    <td>
                        <input type="text" id="bh" class="item" value="<%- item_bh %>">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>名称:</label>
                    </td>
                    <td>
                        <input type="text" id="name"  class="item"  value="<%- item_name %>">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>规格:</label>
                    </td>
                    <td>
                        <input type="text" id="guige"  class="item"   value="<%- item_guige %>">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>单位:</label>
                    </td>
                    <td>
                        <input type="text" id="danwei"  class="item"  value="<%- item_danwei %>">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>数量:</label>
                    </td>
                    <td>
                        <input type="text" id="ct"  class="packitem"  value="<%- ct %>">
                    </td>
                </tr>
                </table>
            <button  class="btn btn-primary" id="bt_save_item">保存</button>
      </script>
    </div>
  </body>
</html>
